<template>
    <view class="title-content">
        {{content[1]}}
  </view>
  <view>
    <image
    class="core-ad"
      :src="EnumBG.BC3"
      mode="widthFix"
    ></image>
  </view>
  <scroll-view scroll-y class="body-content">
        {{content[0]}}
  </scroll-view>
  <image
    class="core-logo"
      :src="EnumBG.BC4"
      mode="widthFix"
    ></image>

    <image
        class="h-button-def"
        :class=" sizeStatus ? 'h-button':'h-button-samll'"  
        src="@/static/fund/tip.png"
        mode="widthFix"
    ></image>
    
    <view class="mr-commit" @click="commit" :style="{ 'background-image': 'url(' + EnumBG.BU4 + ')' }">
        再测一次
    </view>
</template>

<script setup lang="ts">
import {  EnumBG } from "@/utils/content";
import { EnumStatus } from "@/utils/constants";

interface IProps {
    content:any
}
const sizeStatus = ref(false)
const props = withDefaults(defineProps<IProps>(), {})
const emit = defineEmits(['update:defStatus'])
const commit = ()=>{
  emit('update:defStatus',EnumStatus.STATUS)
}
const startTimer = () => {
  setInterval(() => {
      sizeStatus.value =  !sizeStatus.value
  }, 1000); // 每秒执行一次
};
onMounted(()=>{
    startTimer()
})
</script>

<style lang="scss" scoped>
.title-content{
    z-index: 120;
    position: absolute;
    top:46%;
    width: 100%;
    text-align: center;
    font-size: 50rpx;
    background: linear-gradient(to right, red, yellow); /* 从左到右渐变，颜色从红色到黄色 */
    font-weight: bolder;
     -webkit-background-clip: text;
    color: transparent; /* 隐藏实际文本颜色 */
    // display: inline-block; /* 让渐变作用于文本内容 */
}
.h-button-def{
        position: absolute;
        z-index: 99;
        top: 105%;
        height: 100rpx;
        left: 63%;
        z-index: 121;
    }
    .h-button{
        width: 36%;
        left: 63%;
        transition: all 1s;
    }
    .h-button-samll{
        width: 32%;
        left: 63%;
        transition: all 1s;
    }


.core-ad{
    z-index: 122;
    position: absolute;
    top:69%;
    width: 300rpx;
    left: 10%;
}
.core-logo{
    z-index: 120;
    position: absolute;
    top:110%;
    width: 150rpx;
    left: 77%;
}

.body-content{
    z-index: 100;
    position: absolute;
    top:68%;
    width: 80%;
    left: 8%;
    font-size: 28rpx;
    background:rgb(246,251,255);
    height: 30%;
    line-height: 50rpx;
    border-radius: 20rpx;
    padding: 20rpx;
    padding-top: 100rpx;
}
.mr-commit{
      z-index: 102;
      position: absolute;
      top: 106%;
      width: 46%;
      height: 110rpx;
      left: 27%;
      background-size: 100% 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
  }

</style>
